<template>
  <ElementEditor :type="data.type" v-model:element="data.element" v-model:element-props="data.elementProps" />
</template>
<script lang="ts" setup>
  import { getSeed } from '@/views/seed-dev'
  import { ref, watch } from 'vue';
  import { save } from '..';
  import { ColumnConfiguration } from '@/views/dev-types';
  import { ElementEditor } from '../../ElementEditor';

  const props = defineProps<{seedName: string, columnName: string}>()

  function getInitData() {
    if(!props.columnName) return {}

    // const microName = currentMicro.value
    // if(microName) {
    //   const micro = currentApp.value.micros[microName]
    //   const seed = micro.seeds[props.seedName]
    //   return seed.columns[props.columnName]
    // }

    // const seed = currentApp.value.seeds[props.seedName]
    
    return getSeed(props.seedName)?.columns[props.columnName]
  }

  const name = ref<string>(props.columnName)
  const data = ref<ColumnConfiguration>(getInitData())

  watch([() => props.seedName, () => props.columnName], () => {
    name.value = props.columnName
    data.value = getInitData()
  })
  watch(() => data.value, () => save(props.seedName, name.value, data.value), { deep: true })
</script>